<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-20 15:42:38
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-21 00:02:32
-->
<template>
    <div>
        <el-form :inline="true" ref="customerfromRef" :model="customerfrom" :rules="rules" class="demo-form-inline"
            label-width="100px">
            <!-- 客户信息 -->
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="colorBar"></div>
                        <div>客户信息</div>
                    </div>
                </template>

                <el-form-item label="客户名称" prop="customername">
                    <el-input v-model="customerfrom.customername" placeholder="请输入客户名称" clearable />
                </el-form-item>
                <el-form-item label="性别" prop="customersex">
                    <el-select v-model="customerfrom.customersex" placeholder="请选择性别" clearable>
                        <el-option label="先生" value="boy" />
                        <el-option label="女士" value="girl" />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户联系人" prop="customercontact">
                    <el-input v-model="customerfrom.customercontact" placeholder="请输入联系人" clearable />
                </el-form-item>
                <el-form-item label="生日" prop="customerbirthday">
                    <div style="width:180px">
                        <el-date-picker v-model="customerfrom.customerbirthday" type="date" placeholder="请选择生日" clearable
                            style="width:100%" />
                    </div>
                </el-form-item>
                <el-form-item label=" 联系电话" prop="customerphone">
                    <el-input v-model="customerfrom.customerphone" placeholder="请输入联系电话" clearable />
                </el-form-item>
                <el-form-item label="客户简介" prop="customerprofile">
                    <el-input v-model="customerfrom.customerprofile" placeholder="请输入客户简介" clearable />
                </el-form-item>
                <el-form-item label="联系邮箱" prop="customeremail">
                    <el-input v-model="customerfrom.customeremail" placeholder="请输入联系邮箱" clearable />
                </el-form-item>
                <el-form-item label="所属地区" prop="customerarea">
                    <div style="width:180px">
                        <el-cascader v-model="customerfrom.customerarea" :options="provinceAndCityDataRef"
                            style="width:100%" />
                    </div>
                </el-form-item>
                <el-form-item label="公司职位" prop="customerposition">
                    <el-input v-model="customerfrom.customerposition" placeholder="请输入公司职位" clearable />
                </el-form-item>
                <el-form-item label="信用代码" prop="creditcode">
                    <el-input v-model="customerfrom.creditcode" placeholder="请输入信用代码" clearable />
                </el-form-item>
            </el-card>
            <!-- 跟进信息 -->
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="colorBar"></div>
                        <div>跟进信息</div>
                    </div>
                </template>
                <el-form-item label="客户来源" prop="customersource">
                    <el-select v-model="customerfrom.customersource" placeholder="请选择客户来源" clearable>
                        <el-option label="电话营销" value="TelephoneMarketing " />
                        <el-option label="微信营销" value="WeChatMarketing " />
                        <el-option label="SEM" value="SEM" />
                        <el-option label="信息流" value="InformationFlow " />
                        <el-option label="客户介绍" value="CustomerIntroduction " />
                        <el-option label="独立开发" value="IndependentDevelopment" />
                        <el-option label="社群" value="Community " />
                        <el-option label="其他" value="Others" />
                    </el-select>
                </el-form-item>
                <el-form-item label="跟进状态" prop="followupstatus">
                    <el-select v-model="customerfrom.followupstatus" placeholder="请选择跟进状态" clearable>
                        <el-option label="初次沟通" value="FirstCommunication" />
                        <el-option label="方案报价" value="SolutionQuotation" />
                        <el-option label="邀约进行" value="InvitationToProceed" />
                        <el-option label="商务谈判" value="BusinessNegotiation" />
                        <el-option label="拟定合同" value="DrawUpAContract" />
                        <el-option label="签订合同" value="signingTheContract" />
                        <el-option label="结束跟进" value="EndFollowUp" />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户等级" prop="customerlevel">
                    <el-select v-model="customerfrom.customerlevel" placeholder="请选择客户等级" clearable>
                        <el-option label="SSS" value="SSS" />
                        <el-option label="SS" value="SS" />
                        <el-option label="S" value="S" />
                        <el-option label="A" value="A" />
                        <el-option label="B" value="B" />
                        <el-option label="C" value="C" />
                        <el-option label="D" value="D" />
                    </el-select>
                </el-form-item>
                <el-form-item label="跟进时间" prop="followuptime">
                    <div style="width:180px">
                        <el-date-picker v-model="customerfrom.followuptime" type="date" placeholder="请选择跟进时间" clearable
                            style="width:100%" />
                    </div>

                </el-form-item>
                <el-form-item label="意向产品" prop="intentionalproduct">
                    <el-select v-model="customerfrom.intentionalproduct" placeholder="请选择意向产品" clearable>
                        <el-option label="手机" value="phone" />
                        <el-option label="笔记本电脑" value="laptop" />
                        <el-option label="耳机" value="headphones" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人" prop="founder">
                    <el-input v-model="customerfrom.founder" placeholder="请输入联系人" clearable />
                </el-form-item>
                <el-form-item label="跟进部门" prop="followupdepartment">
                    <el-select v-model="customerfrom.followupdepartment" placeholder="请选择跟进部门" clearable>
                        <el-option label="市场一部" value="MarketingDivisionOne" />
                        <el-option label="市场二部" value="MarketingDivisionTwo" />
                        <el-option label="市场三部" value="MarketingDivisionThree" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="customerfrom.remark" placeholder="请输入备注" clearable />
                </el-form-item>
            </el-card>
            <el-card class="buttonItem">
                <el-button type="primary" :loading="loading" @click="saveForm">保存</el-button>
                <el-button type="primary">取消</el-button>
            </el-card>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref } from 'vue';
import { provinceAndCityData, regionData } from 'element-china-area-data';
import type { FormInstance, FormRules } from 'element-plus';
import { successMessage } from '@/utils/Tools/successMessage';
import { errorMessage } from '@/utils/Tools/errorMessage';
import { customerAddApi } from '@/services/customer'
import type { ICustomerData } from "@/types/customer";


const provinceAndCityDataRef = ref(provinceAndCityData);
const regionDataRef = ref(regionData);

//定义表单数据
const customerfrom = reactive(
    {
        "customername": "深圳研发科技有限公司",
        "customersex": "未知",
        "customercontact": "张三",
        "customerbirthday": "未知",
        "customerphone": "17688888888",
        "customerprofile": "公司信息待填",
        "customeremail": "zhangsan@example.com",
        "customerarea": "深圳",
        "customerposition": "技术总监",
        "creditcode": "待填",
        "customersource": "电话营销",
        "followupstatus": "初次沟通",
        "customerlevel": "SSS",
        "followuptime": "2013-11-1",
        "intentionalproduct": "笔记本电脑",
        "founder": "张三",
        "followupdepartment": "销售部",
        "remark": "备注信息待填"


    })
interface IProps {
    setDialogVisible: (visible: boolean) => void
}
const props = defineProps<IProps>()
const customerfromRef = ref<FormInstance>()
const loading = ref(false);

const saveForm = () => {
    if (!customerfromRef.value) return
    loading.value = true
    customerfromRef.value.validate(async valid => {
        if (valid) {
            //这儿需要网络请求
            let ret = await customerAddApi(customerfrom)
            console.log(ret)
            if (ret.code === 200) {
                successMessage('添加用户成功', () => {
                    loading.value = false
                    props.setDialogVisible(false)
                }, 1000)
            } else {
                errorMessage('添加用户异常，请重新提交', () => {
                    loading.value = false
                }, 3000)
            }
        } else {
            errorMessage('表单验证失败', () => {
                loading.value = false
            }, 3000)
        }
    })
}

const rules = reactive<FormRules<ICustomerData.ICustomer>>({
    customername: [{ required: true, whitespace: true, message: '客户名称不能为空', trigger: 'blur' }],
    customercontact: [
        { required: true, whitespace: true, message: '客户联系人不能为空', trigger: 'blur' },
    ],
    customerphone: [
        { required: true, whitespace: true, message: '联系电话不能为空', trigger: 'blur' },
    ],
    customersource: [{ required: true, whitespace: true, message: '客户来源不能为空', trigger: 'blur' },],
    followupstatus: [{ required: true, whitespace: true, message: '跟进状态不能为空', trigger: 'blur' },],
    customerlevel: [{ required: true, whitespace: true, message: '客户等级不能为空', trigger: 'blur' },],
    followuptime: [{ required: true, whitespace: true, message: '跟进时间不能为空', trigger: 'blur' },],
    intentionalproduct: [{ required: true, whitespace: true, message: '意向产品不能为空', trigger: 'blur' },],
    founder: [{ required: true, whitespace: true, message: '联系人不能为空', trigger: 'blur' },],
})
</script>

<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;


    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;

        .card-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }





}


.el-form-item {

    .el-input,
    .el-select,
    .el-date-picker,
    .el-date-editor.el-input,
    .el-form-item__content {
        width: 180px !important;
        margin-right: 20px; // Add margin between input fields if needed
    }
}

.el-date-picker {
    width: 180px !important;
}

.buttonItem {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-button {
        margin: 0 10px; // Adjust margin as needed
    }
}
</style>